import $ from 'jquery'
import dataCenter from '../store/index'
$(() => {
    $('rank-pop').hide()
    $('.user-option').hide()
    $('.toolPop').hide()
    $('.user-icon').mouseenter(() => {
        $('.user-option').stop().fadeIn()
    })
    $('.user-icon').mouseleave(() => {
        $('.user-option').stop().fadeOut()
    })
    $('.popTrigger').mouseenter(function () {
        $(this).find('.toolPop').stop().fadeIn()
    })
    $('.popTrigger').mouseleave(function () {
        $(this).find('.toolPop').stop().fadeOut()
    })
    // 首页滑动条的代码
    var posList = $('.pos')
    $('.fixed-bar li').on('click', function () {
        const Parent = $(posList).eq($(this).index())
        $('html,body').stop().animate({ scrollTop: Parent.offset().top }, 1000, GetScrollHighLight)
    })
    $(window).on('scroll', function () {
        if ($(window).attr('pageYOffset') > 210) {
            $('.fixed-bar').css({ position: 'fixed', top: '0px' })
            $('.fixed-bar li').removeClass('bar-is-active')
        } else {
            $('.fixed-bar').css({ position: 'absolute', top: '255px' })
        }
        GetScrollHighLight()
    })
    $('.return-top').click(function () {
        $('html,body').stop().animate({ scrollTop: 0 }, 100, GetScrollHighLight)
    })
    function GetScrollHighLight() {
        const offsetY = $(window).attr('pageYOffset')
        posList.each((i, value) => {
            const endValue = $(value).offset().top + $(value).height()
            if (offsetY > ($(value).offset().top - 50) && offsetY < endValue) {
                $('.fixed-bar li').removeClass('bar-is-active')
                $('.fixed-bar li').eq(i).addClass('bar-is-active')
                return true
            }
        })
    }
    // 设置鼠标hover在视频通过的offsetX除视频盒子宽度 得出百分比
    $('.video-effect').on('mouseenter', function () {
        $('.video-effect').on('mousemove', function (e) {
            const percent = parseInt(($(e).attr('offsetX') / $(this).width()) * 100)
            dataCenter.commit('setPercentData', percent)
        })
    })
    $('.video-effect').on('mouseleave', function () {
        dataCenter.commit('setPercentData', 0)
    })
    // 排行榜的弹窗
    $('.pop-rank-hover').on('mouseenter', function () {
        $('.rank-pop').css({ top: $(this).offset().top - 120, left: $(this).offset().left })
        $('.rank-pop').show()
    })

    $('.pop-rank-hover').on('mouseleave', function () {
        $('.rank-pop').hide()
    })
})
